<template>
	<view class="page-b">

		<!-- 顶部自定义导航 -->
		<!-- <tn-nav-bar :isBack="true" :bottomShadow="true" backgroundColor="none">
			<view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
				<view class="custom-nav__back">
					<text class="tn-text-bold tn-text-xl tn-color-black">图片分类</text>
				</view>
			</view>
		</tn-nav-bar> -->
		
		<view class="" v-if="isEmpty">
			<tui-no-data imgUrl="/static/img/img_noorder_3x.png">暂无数据</tui-no-data>
		</view>

		<view class="tn-classify__wrap" v-show="!isEmpty">

			<!-- 页面头部 -->
			<view class="page-header">
				<view class="page-title">题库分类</view>
				<view class="page-subtitle">请选择所需要练习的题库</view>
			</view>

			<!-- 分类列表和内容 -->
			<view class="tn-classify__container">
				<view class="tn-classify__container__wrap tn-flex tn-flex-nowrap">
					<!-- 左边容器 -->
					<scroll-view class="tn-classify__left-box left-width" :scroll-top="leftScrollViewTop" scroll-y
						scroll-with-animation :style="{height: scrollViewHeight + 'px'}">
						<view v-for="(item, index) in tabbar" :key="index" :id="`tabbar_item_${index}`"
							class="tn-classify__tabbar__item tn-flex tn-flex-col-center tn-flex-row-center"
							:class="[tabbarItemClass(index)]" @tap.stop="clickClassifyNav(index)">
							<view class="tn-classify__tabbar__item__title">{{ item.name }}</view>
						</view>
					</scroll-view>

					<!-- 右边容器 -->
					<scroll-view class="tn-classify__right-box" scroll-y :scroll-top="rightScrollViewTop"
						:style="{height: scrollViewHeight + 'px'}">
						<!-- 加载状态 -->
						<view v-if="loading" class="tn-classify__loading tn-flex tn-flex-col-center tn-flex-row-center">
							<tui-loading :show="true" mask="none" type="line"></tui-loading>
							<text class="tn-margin-top-sm tn-color-gray">加载中...</text>
						</view>
						
						<block v-else-if="classifyContent.subClassify && classifyContent.subClassify.length > 0">
							<view class="tn-classify__content">

								<!-- 分类内容子栏目 -->
								<view v-for="(item,index) in classifyContent.subClassify" :key="index" class="tn-classify__content__sub-classify">

									<view class="tn-classify__content__sub-classify__content" v-if="item.classify && item.classify.length > 0">
										<view v-for="(sub_item,sub_index) in item.classify" :key="sub_index">
											<!-- 二级分类 -->
											<view class="tn-classify__content__sub-classify__content__item tn-flex tn-flex-col-center tn-flex-row-between level-2"
												:class="{ 'expanded': sub_item.expanded }">
												<view class="item-name">{{sub_item.name}}</view>
												<view class="item-action">
													<view class="expand-plus-icon" @click.stop="toggleExpand(sub_item, sub_index)">
														<text v-if="!sub_item.expanded">+</text>
														<text v-else>-</text>
													</view>
												</view>
											</view>
											
											<!-- 三级分类 -->
											<view v-if="sub_item.expanded && sub_item.children && sub_item.children.length > 0" 
												class="level-3-container">
												<view v-for="(third_item, third_index) in sub_item.children" :key="third_index"
													class="tn-classify__content__sub-classify__content__item tn-flex tn-flex-col-center tn-flex-row-between level-3">
													<view class="item-name">{{third_item.name}}</view>
													<view class="item-action">
														<view 
															class="select-button" 
															:class="{ 'select-button-active': isThirdItemSelected(third_item) }"
															@click="clickSubject(third_item)"
														>
															<text class="select-button-text">选择</text>
														</view>
													</view>
												</view>
											</view>
											
											<!-- 三级分类加载状态 -->
											<view v-if="sub_item.expanded && sub_item.loadingChildren" 
												class="level-3-loading">
												<tui-loading :show="true" mask="none" type="line"></tui-loading>
												<text class="tn-margin-left-sm tn-color-gray">加载中...</text>
											</view>
											
											<!-- 三级分类空状态 -->
											<view v-if="sub_item.expanded && !sub_item.loadingChildren && (!sub_item.children || sub_item.children.length === 0)" 
												class="level-3-empty">
												<text class="tn-color-gray">暂无子分类</text>
											</view>
										</view>
									</view>
									
									<!-- 空状态 -->
									<view v-else class="tn-classify__empty tn-flex tn-flex-col-center tn-flex-row-center">
										<text class="tn-color-gray">暂无子分类</text>
									</view>
								</view>
							</view>

						</block>
						
						<!-- 右边空状态 -->
						<view v-else class="tn-classify__empty tn-flex tn-flex-col-center tn-flex-row-center">
							<text class="tn-color-gray">请先选择左边的分类</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cateApi from "@/common/api/cate.js"
	
	export default {
		name: 'templateShopClassify',
		data() {
			return {
				// 侧边栏分类数据
				tabbar: [],
				// 分类里面的内容信息
				classifyContent: {
					// 每个子栏目下的内容
					subClassify: [
						{
							title: '推荐',
							classify: []
						},
					]
				},
				// 分类菜单item的信息
				tabbarItemInfo: [],
				// scrollView的top值
				scrollViewBasicTop: 0,
				// scrollView的高度
				scrollViewHeight: 0,
				// 左边scrollView的滚动高度
				leftScrollViewTop: 0,
				// 右边scrollView的滚动高度
				rightScrollViewTop: 0,
				// 当前选中的tabbar序号
				currentTabbarIndex: -1,
				// 题库列表
				subjectList: [],
				// 用户一级题库ID
				userSubjectId1: null,
				userSubjectIndex1: 0,
				// 用户二级题库ID
				userSubjectId2: null,
				userSubjectIndex2: 0,
				// 用户三级题库ID
				userSubjectId3: null,
				userSubjectIndex3: 0,
				// 类型
				type: '',
				isEmpty: false,
				// 加载状态
				loading: false,
			}
		},
		computed: {
			tabbarItemClass() {
				return index => {
					if (index === this.currentTabbarIndex) {
						return 'tn-classify__tabbar__item--active tn-bg-white'
					} else {
						let clazz = 'tn-bg-gray--light'
						if (this.currentTabbarIndex > 0 && index === this.currentTabbarIndex - 1) {
							clazz += ' tn-classify__tabbar__item--active--prev'
						}
						if (this.currentTabbarIndex < this.tabbar.length && index === this.currentTabbarIndex + 1) {
							clazz += ' tn-classify__tabbar__item--active--next'
						}
						return clazz
					}
				}
			},
			
			// 调试用：检查三级分类是否被选中
			isThirdItemSelected() {
				return (thirdItem) => {
					const isSelected = thirdItem.id == this.userSubjectId3
					if (isSelected) {
						console.log('选中的三级分类:', thirdItem.name, thirdItem.id, '当前ID:', this.userSubjectId3)
					}
					return isSelected
				}
			}
		},
		watch: {
			userSubjectId3: {
				handler(newVal, oldVal) {
					console.log('userSubjectId3 变化:', oldVal, '->', newVal)
				},
				immediate: true
			}
		},
		created(e) {
			
		},
		onLoad(e) {
			console.log('=== 页面加载开始 ===')
			console.log('subject e', e)
			if (e?.type) {
				this.type = e.type
				if (this.type == 'onlySubject') {
					uni.setNavigationBarTitle({
						title: '已绑定题库'
					});
				}
			}
			
			console.log('开始获取用户题库选择...')
			this.getUserSubject()
			console.log('开始加载数据...')
			this.ajax()
			console.log('=== 页面加载结束 ===')
		},
		mounted() {
			// this.$nextTick(() => {
			// 	this.getScrollViewInfo()
			// 	this.getTabbarItemRect()
			// })
		},
		methods: {
			getUserSubject() {
				let userSubject = uni.getStorageSync('user_subject')
				console.log('getUserSubject:', userSubject)
				if (userSubject) {
					this.userSubjectId1 = userSubject.subject1?.id
					this.userSubjectId2 = userSubject.subject2?.id
					this.userSubjectId3 = userSubject.subject3?.id
					
					console.log('已读取用户选择:', {
						userSubjectId1: this.userSubjectId1,
						userSubjectId2: this.userSubjectId2,
						userSubjectId3: this.userSubjectId3
					})
				} else {
					// 如果没有存储的用户选择，设置默认值
					this.userSubjectId1 = null
					this.userSubjectId2 = null
					this.userSubjectId3 = null
				}
			},
			ajax() {
				this.loading = true
				// 获取主分类列表（不传pid）
				cateApi.getCateList(this, {}).then(res => {
					this.loading = false
					if (res && res.code == 1) {
						if (res.data.length > 0) {
							this.isEmpty = false
							this.tabbar = res.data
							
							console.log('this.tabbar', this.tabbar);
							
							// 查找用户选择的主分类索引
							let foundIndex = -1
							if (this.userSubjectId1 !== null && this.userSubjectId1 !== undefined) {
								for (let i = 0; i < res.data.length; i++) {
									if (res.data[i].id == this.userSubjectId1) {
										foundIndex = i
										break
									}
								}
							}
							
							// 如果没有找到用户选择的分类，默认选择第一个
							if (foundIndex === -1) {
								foundIndex = 0
							}
							this.userSubjectIndex1 = foundIndex
							// 设置当前选中的分类索引
							this.currentTabbarIndex = foundIndex
							
							setTimeout(() => {
								this.getScrollViewInfo()
								this.getTabbarItemRect()
								
								// 默认选择分类，强制加载右边内容
								this.clickClassifyNav(this.userSubjectIndex1, true)
							}, 100)
						} else {
							this.isEmpty = true
						}
					} else {
						this.utils.alert(res?.msg || '获取分类列表失败')
						this.isEmpty = true
					}
				}).catch(err => {
					this.loading = false
					this.utils.alert('获取分类列表失败')
					this.isEmpty = true
				})
			},
			
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},

			// 获取scrollView的高度信息
			getScrollViewInfo() {
				// 获取页面头部的bottom信息，然后用整个屏幕的可用高度减去bottom的值即可获取scrollView的高度(防止双重滚动)
				this._tGetRect('.page-header').then((rect) => {
					// 如果获取失败重新获取
					if (!rect || rect.bottom === null || rect.bottom === undefined) {
						setTimeout(() => {
							this.getScrollViewInfo()
						}, 100)
						return
					}
					
					// 获取当前屏幕的可用高度
					try {
						const systemInfo = uni.getSystemInfoSync()
						if (systemInfo && systemInfo.safeArea && systemInfo.statusBarHeight !== undefined) {
							this.scrollViewBasicTop = systemInfo.statusBarHeight + rect.bottom + uni.upx2px(20)
							this.scrollViewHeight = systemInfo.safeArea.height + systemInfo.statusBarHeight - rect.bottom -
								uni.upx2px(20) - 49
						} else {
							// 如果获取系统信息失败，使用默认值
							this.scrollViewBasicTop = 44 + rect.bottom + uni.upx2px(20)
							this.scrollViewHeight = 600 // 默认高度
						}
					} catch (error) {
						console.error('获取系统信息失败:', error)
						// 使用默认值
						this.scrollViewBasicTop = 44 + rect.bottom + uni.upx2px(20)
						this.scrollViewHeight = 600
					}
				}).catch((error) => {
					console.error('获取页面头部信息失败:', error)
					// 重试
					setTimeout(() => {
						this.getScrollViewInfo()
					}, 100)
				})
			},
			// 获取分类菜单每个item的信息
			getTabbarItemRect() {
				// 如果tabbar数据还没有加载完成，延迟执行
				if (!this.tabbar || this.tabbar.length === 0) {
					setTimeout(() => {
						this.getTabbarItemRect()
					}, 100)
					return
				}
				
				let view = uni.createSelectorQuery().in(this)
				for (let i = 0; i < this.tabbar.length; i++) {
					view.select('#tabbar_item_' + i).boundingClientRect()
				}
				view.exec(res => {
					// 检查返回结果
					if (!res || !res.length) {
						setTimeout(() => {
							this.getTabbarItemRect()
						}, 100)
						return
					}

					// 清空之前的数据
					this.tabbarItemInfo = []
					
					// 将每个分类item的相关信息，添加空值检查
					res.forEach((item) => {
						if (item && item.top !== null && item.top !== undefined) {
							this.tabbarItemInfo.push({
								top: item.top,
								height: item.height || 0
							})
						}
					})
					
					// 如果获取到的信息数量不匹配，重新尝试
					if (this.tabbarItemInfo.length !== this.tabbar.length) {
						setTimeout(() => {
							this.getTabbarItemRect()
						}, 100)
					}
				})
			},
			// 点击了分类导航
			clickClassifyNav(index, forceLoad = false) {
				// 如果不是强制加载，且当前选中的索引相同，则不处理
				if (!forceLoad && this.currentTabbarIndex === index) {
					return
				}
				
				// 检查索引是否有效
				if (index < 0 || index >= this.tabbar.length) {
					return
				}
				
				this.currentTabbarIndex = index
				this.handleLeftScrollView(index)
				this.switchClassifyContent()
			},
			// 点击分类后，处理scrollView滚动到居中位置
			handleLeftScrollView(index) {
				// 检查索引和数据有效性
				if (!this.tabbarItemInfo || !this.tabbarItemInfo[index]) {
					return
				}
				
				// 检查必要的属性
				if (this.tabbarItemInfo[index].top === null || this.tabbarItemInfo[index].top === undefined) {
					return
				}
				
				console.log('handleLeftScrollView', this.tabbarItemInfo, this.tabbarItemInfo[index])
				
				const tabbarItemTop = this.tabbarItemInfo[index].top - this.scrollViewBasicTop
				if (tabbarItemTop > this.scrollViewHeight / 2) {
					this.leftScrollViewTop = tabbarItemTop - (this.scrollViewHeight / 2) + (this.tabbarItemInfo[index].height || 0)
				} else {
					this.leftScrollViewTop = 0
				}
			},
			// 切换对应分类的数据
			switchClassifyContent() {
				this.rightScrollViewTop = 1
				this.$nextTick(() => {
					this.rightScrollViewTop = 0
				})
				
				// 获取选中主分类的子分类列表
				const selectedCate = this.tabbar[this.currentTabbarIndex]
				if (selectedCate && selectedCate.id) {
					this.loading = true
					// 调用接口获取子分类，传入主分类ID作为pid
					cateApi.getCateList(this, { pid: selectedCate.id }).then(res => {
						this.loading = false
						if (res && res.code == 1) {
							this.classifyContent.subClassify[0].title = selectedCate.name
							
							// 为每个二级分类添加完整的数据结构
							const classifyData = (res.data || []).map((item, index) => {
								if (!item || typeof item !== 'object') {
									console.error('Invalid item data:', item)
									return null
								}
								
								// 创建完整的数据结构
								const completeItem = {
									...item,
									expanded: false,
									children: [],
									loadingChildren: false,
									hasChildren: true // 默认假设有子分类
								}
								
								return completeItem
							}).filter(item => item !== null) // 过滤掉无效的项
							
							this.$set(this.classifyContent.subClassify[0], 'classify', classifyData)
							
							// 查找用户选择的子分类索引，并自动展开包含已选择三级分类的二级分类
							let foundSecondIndex = -1
							for (let j = 0; j < classifyData.length; j++) {
								if (classifyData[j] && classifyData[j].id == this.userSubjectId2) {
									this.userSubjectIndex2 = j
									foundSecondIndex = j
									break
								}
							}
							
							// 如果找到了已选择的二级分类，且有三级分类选择，自动展开并加载三级分类
							if (foundSecondIndex >= 0 && this.userSubjectId3) {
								const secondItem = classifyData[foundSecondIndex]
								if (secondItem) {
									// 延迟执行，确保DOM已更新
									this.$nextTick(() => {
										this.loadThirdLevelAndExpand(secondItem)
									})
								}
							}
						} else {
							this.classifyContent.subClassify[0].title = selectedCate.name
							this.$set(this.classifyContent.subClassify[0], 'classify', [])
							this.utils.alert(res?.msg || '获取子分类失败')
						}
					}).catch(err => {
						console.error('switchClassifyContent error:', err)
						this.loading = false
						this.classifyContent.subClassify[0].title = selectedCate.name
						this.$set(this.classifyContent.subClassify[0], 'classify', [])
						this.utils.alert('获取子分类失败')
					})
				} else {
					// 如果没有选中的分类，清空右边内容
					this.classifyContent.subClassify[0].title = ''
					this.$set(this.classifyContent.subClassify[0], 'classify', [])
				}
			},
			
			// 加载三级分类并展开
			loadThirdLevelAndExpand(secondItem) {
				if (!secondItem || !secondItem.id) return
				
				// 设置展开状态
				this.$set(secondItem, 'expanded', true)
				this.$set(secondItem, 'loadingChildren', true)
				
				console.log('自动加载三级分类:', secondItem.name, secondItem.id)
				
				cateApi.getCateList(this, { pid: secondItem.id }).then(res => {
					this.$set(secondItem, 'loadingChildren', false)
					
					if (res && res.code == 1) {
						const children = res.data || []
						this.$set(secondItem, 'children', children)
						this.$set(secondItem, 'hasChildren', children.length > 0)
						
						console.log('三级分类加载完成:', children.length, '个')
						console.log('当前选中的三级ID:', this.userSubjectId3)
					} else {
						this.$set(secondItem, 'children', [])
						this.$set(secondItem, 'hasChildren', false)
					}
				}).catch(err => {
					console.error('loadThirdLevelAndExpand error:', err)
					this.$set(secondItem, 'loadingChildren', false)
					this.$set(secondItem, 'children', [])
					this.$set(secondItem, 'hasChildren', false)
				})
			},
			
			// 切换二级分类的展开状态
			toggleExpand(subItem, subIndex) {
				// 检查参数有效性
				if (!subItem || typeof subItem !== 'object') {
					console.error('toggleExpand: subItem is invalid', subItem)
					return
				}
				
				// 初始化必要的属性
				if (!subItem.hasOwnProperty('expanded')) {
					this.$set(subItem, 'expanded', false)
				}
				if (!subItem.hasOwnProperty('children')) {
					this.$set(subItem, 'children', [])
				}
				if (!subItem.hasOwnProperty('loadingChildren')) {
					this.$set(subItem, 'loadingChildren', false)
				}
				if (!subItem.hasOwnProperty('hasChildren')) {
					this.$set(subItem, 'hasChildren', true)
				}
				
				// 如果已经展开，则收起
				if (subItem.expanded) {
					subItem.expanded = false
					return
				}
				
				// 如果没有展开，则展开并加载三级分类
				subItem.expanded = true
				
				// 如果已经加载过三级分类，则不重复加载
				if (subItem.children && subItem.children.length > 0) {
					return
				}
				
				// 如果正在加载中，不重复加载
				if (subItem.loadingChildren) {
					return
				}
				
				// 检查是否有子分类ID
				if (!subItem.id) {
					console.error('toggleExpand: subItem.id is missing', subItem)
					this.$set(subItem, 'hasChildren', false)
					return
				}
				
				// 加载三级分类
				this.$set(subItem, 'loadingChildren', true)
				
				cateApi.getCateList(this, { pid: subItem.id }).then(res => {
					this.$set(subItem, 'loadingChildren', false)
					
					if (res && res.code == 1) {
						const children = res.data || []
						this.$set(subItem, 'children', children)
						this.$set(subItem, 'hasChildren', children.length > 0)
					} else {
						this.$set(subItem, 'children', [])
						this.$set(subItem, 'hasChildren', false)
						this.utils.alert(res?.msg || '获取三级分类失败')
					}
				}).catch(err => {
					console.error('toggleExpand error:', err)
					this.$set(subItem, 'loadingChildren', false)
					this.$set(subItem, 'children', [])
					this.$set(subItem, 'hasChildren', false)
					this.utils.alert('获取三级分类失败')
				})
			},
			
			// 点击最终的三级分类
			clickSubject(subItem) {
				// 检查参数有效性
				if (!subItem || !subItem.id) {
					console.error('clickSubject: subItem is invalid', subItem)
					this.utils.alert('选择的分类数据无效')
					return
				}
				
				// 检查当前是否有选中的主分类
				if (this.currentTabbarIndex < 0 || !this.tabbar[this.currentTabbarIndex]) {
					console.error('clickSubject: no selected main category')
					this.utils.alert('请先选择主分类')
					return
				}
				
				console.log('clickSubject', subItem, this.tabbar[this.currentTabbarIndex])
				
				// 找到对应的二级分类
				let parentSecondItem = null
				const classifyList = this.classifyContent.subClassify[0]?.classify || []
				
				for (let classify of classifyList) {
					if (classify && classify.children && Array.isArray(classify.children)) {
						const foundChild = classify.children.find(child => child && child.id === subItem.id)
						if (foundChild) {
							parentSecondItem = classify
							break
						}
					}
				}
				
				// 如果找不到父级二级分类，使用当前选中的主分类作为fallback
				if (!parentSecondItem) {
					console.warn('clickSubject: parent second item not found, using fallback')
					parentSecondItem = {
						id: this.tabbar[this.currentTabbarIndex].id,
						name: this.tabbar[this.currentTabbarIndex].name
					}
				}
				
				// 构建存储数据
				const subjectData = {
					subject1: {
						id: this.tabbar[this.currentTabbarIndex].id,
						name: this.tabbar[this.currentTabbarIndex].name,
					},
					subject2: {
						id: parentSecondItem.id,
						name: parentSecondItem.name,
					},
					subject3: {
						id: subItem.id,
						name: subItem.name,
					}
				}
				
				// 立即更新选中状态，让用户看到选中效果
				this.userSubjectId1 = subjectData.subject1.id
				this.userSubjectId2 = subjectData.subject2.id
				this.userSubjectId3 = subjectData.subject3.id
				
				console.log('立即更新选中状态:', {
					userSubjectId1: this.userSubjectId1,
					userSubjectId2: this.userSubjectId2,
					userSubjectId3: this.userSubjectId3
				})
				
				// 强制更新视图
				this.$forceUpdate()
				
				// 保存到本地存储
				try {
					uni.setStorageSync('user_subject', subjectData)
					
					console.log('Subject saved:', subjectData)
					
					// 显示选择成功提示
					uni.showToast({
						title: `已选择 ${subItem.name}`,
						icon: 'success',
						duration: 1200
					})
					
				} catch (error) {
					console.error('Failed to save subject:', error)
					this.utils.alert('保存选择失败')
					return
				}
				
				// 通知题库选择事件
				uni.$emit('event_subject_choose', {subject_id: subItem.id})
				
				// 延迟跳转，让用户看到选择成功的提示和选中状态
				setTimeout(() => {
					// 根据类型跳转
					if (this.type == 'onlySubject') {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					} else {
						// 返回上一页
						const pages = getCurrentPages()
						if (pages.length > 1) {
							uni.navigateBack({
								delta: 1
							})
						} else {
							// 如果没有上一页，跳转到首页
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					}
				}, 800)
			}
		}
	}
</script>

<style lang="scss" >
	page {
		background-color: #fff;
	}
	
	.page-b {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 40rpx;
	}

	/* 页面头部 */
	.page-header {
		padding: 160rpx 30rpx 40rpx 30rpx;
		background-color: #fff;
		// background-image: url('/static/img/tiku-background.png');
		background-image: url('~@/static/img/tiku-background.png');
		background-size: 100%;
		height: 400rpx;
		// background-size: cover;
		// background-position: center;
		// background-repeat: no-repeat;
		margin-bottom: 30rpx;
		
		.page-title {
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 16rpx;
		}
		
		.page-subtitle {
			font-size: 28rpx;
			color: #666;
		}
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 30rpx;
			margin-right: 10rpx;
			flex-basis: 5%;
			width: 100rpx;
			position: absolute;
		}
	}

	.left-width {
		flex-basis: 38%;
	}

	/* 自定义导航栏内容 end */
	.tn-classify {

		/* 搜索栏 start */
		&__search {
			&--wrap {}

			&__box {
				flex: 1;
				text-align: center;
				padding: 20rpx 30rpx;
				margin: 0 30rpx;
				border-radius: 60rpx;
				font-size: 30rpx;
			}

			&__icon {
				padding-right: 10rpx;
			}

			&__text {
				padding-right: 10rpx;
			}
		}

		/* 搜索栏 end */

		/* 分类列表和内容 strat */
		&__container {
			margin: 0 20rpx 20rpx 20rpx;
			background-color: #fff;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		}

		&__left-box {
			background-color: #f8f8f8;
			border-right: 1px solid #e8e8e8;
		}

		&__right-box {
			background-color: #FFFFFF;
		}

		/* 分类列表和内容 end */

		/* 侧边导航 start */
		&__tabbar {
			&__item {
				min-height: 96rpx;
				padding: 20rpx 24rpx 20rpx 32rpx;
				margin: 0;
				border-bottom: 1px solid #eeeeee;
				display: flex;
				align-items: center;
				transition: all 0.3s ease;
				
				&:hover {
					background-color: rgba(24, 144, 255, 0.04);
				}
				
				&__title {
					font-size: 26rpx;
					color: #333;
					font-weight: normal;
					line-height: 1.5;
					word-break: break-word;
					text-align: left;
					width: 100%;
					padding-right: 10rpx;
					
					/* 如果文本太长，允许换行 */
					white-space: normal;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				&--active {
					background-color: #FFFFFF;
					position: relative;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
					
					.tn-classify__tabbar__item__title {
						color: #1890ff;
						font-weight: 600;
						font-size: 27rpx;
					}

					&::before {
						content: '';
						position: absolute;
						width: 6rpx;
						height: 60rpx;
						top: 50%;
						left: 0;
						background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
						border-radius: 0 6rpx 6rpx 0;
						transform: translateY(-50%);
					}

					&--prev {
						border-bottom-right-radius: 0;
					}

					&--next {
						border-top-right-radius: 0;
					}
				}
				
				&:last-child {
					border-bottom: none;
				}
			}
		}

		/* 侧边导航 end */

		/* 分类内容 start */
		&__content {
			padding: 0;

			/* 子栏目 start */
			&__sub-classify {
				&__content {
					&__item {
						padding: 32rpx 40rpx;
						border-bottom: 1px solid #f5f5f5;
						cursor: pointer;
						transition: all 0.3s ease;
						
						&:hover {
							background-color: #fafafa;
						}
						
						&:active {
							background-color: #f0f0f0;
						}
						
						&:last-child {
							border-bottom: none;
						}
						
						/* 二级分类样式 */
						&.level-2 {
							background-color: #fff;
							
							&.expanded {
								background-color: #f8f9fa;
								border-bottom: 1px solid #e9ecef;
								
								.item-name {
									color: #1890ff;
									font-weight: 600;
								}
							}
						}
						
						/* 三级分类样式 */
						&.level-3 {
							background-color: #fafbfc;
							border-left: 2px solid #e9ecef;
							margin-left: 0;
							padding: 24rpx 40rpx 24rpx 50rpx;
							
							&:hover {
								background-color: #f0f7ff;
								border-left-color: #1890ff;
							}
							
							&:active {
								background-color: #e6f4ff;
							}
							
							.item-name {
								font-size: 26rpx;
								color: #555;
								position: relative;
								
								&::before {
									content: '•';
									position: absolute;
									left: -25rpx;
									top: 0;
									color: #d9d9d9;
									font-size: 20rpx;
								}
							}
						}
						
						.item-name {
							font-size: 28rpx;
							color: #333;
							flex: 1;
							line-height: 1.5;
							word-break: break-word;
						}
						
						.item-action {
							width: 64rpx;
							height: 64rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-left: 20rpx;
							
							.expand-icon {
								width: 44rpx;
								height: 44rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								color: #666;
								font-size: 24rpx;
								transition: all 0.3s ease;
								border-radius: 50%;
								
								&:hover {
									background-color: #f0f0f0;
									color: #1890ff;
								}
								
								.tn-icon-arrow-down {
									transition: transform 0.3s ease;
									
									&.rotated {
										transform: rotate(180deg);
									}
								}
							}
							
							.plus-icon {
								width: 40rpx;
								height: 40rpx;
								background-color: #f5f5f5;
								border-radius: 6rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								color: #999;
								font-size: 24rpx;
								font-weight: normal;
								transition: all 0.2s ease;
								
								&:hover {
									background-color: #e6f4ff;
									color: #1890ff;
								}
							}
							
							.expand-plus-icon {
								width: 60rpx;
								height: 60rpx;
								background-color: #f5f5f5;
								border-radius: 6rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								color: #666;
								font-size: 60rpx;
								font-weight: normal;
								transition: all 0.2s ease;
								
								&:hover {
									background-color: #e6f4ff;
									color: #1890ff;
								}
							}
							
							.select-button {
								padding: 8rpx 20rpx;
								min-width: 80rpx;
								background-color: #f5f5f5;
								border-radius: 6rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								transition: all 0.2s ease;
								white-space: nowrap;
								
								.select-button-text {
									color: #666;
									font-size: 24rpx;
									font-weight: normal;
								}
								
								&:active {
									background-color: #e6f4ff;
								}
								
								&.select-button-active {
									background-color: #1890ff;
									
									.select-button-text {
										color: #fff;
										font-weight: 500;
									}
								}
							}
							

						}
					}
				}
			}

			/* 子栏目 end */
		}

		/* 分类内容 end */
		
		/* 加载状态 start */
		&__loading {
			height: 400rpx;
			padding: 80rpx 40rpx;
			
			text {
				color: #999;
				font-size: 28rpx;
			}
		}
		/* 加载状态 end */
		
		/* 空状态 start */
		&__empty {
			height: 400rpx;
			padding: 80rpx 40rpx;
			
			text {
				color: #999;
				font-size: 28rpx;
			}
		}
		/* 空状态 end */
	}

	/* 三级分类容器 */
	.level-3-container {
		border-left: 2px solid #f0f0f0;
		margin-left: 0;
		background-color: #fafbfc;
	}

	/* 三级分类加载状态 */
	.level-3-loading {
		padding: 24rpx 40rpx;
		background-color: #fafbfc;
		border-left: 2px solid #f0f0f0;
		margin-left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		
		text {
			color: #999;
			font-size: 26rpx;
		}
	}

	/* 三级分类空状态 */
	.level-3-empty {
		padding: 24rpx 40rpx;
		background-color: #fafbfc;
		border-left: 2px solid #f0f0f0;
		margin-left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		
		text {
			color: #999;
			font-size: 26rpx;
		}
	}
</style>